<template>
  <s-layout class="set-wrap" title="我的粉丝" :bgStyle="{ color: '#f7f7f7' }">
    <view class="flex flex-col gap-4 px-4 pt-3">
      <view
        class="flex overflow-hidden flex-col gap-3 p-4 bg-center bg-no-repeat bg-cover rounded-lg"
        style="background-image: url('/static/13201092373.png')"
      >
        <view class="flex justify-between items-center">
          <view class="flex gap-2 items-center">
            <image src="/static/13214152472.png" class="size-[42px]" mode="scaleToFill" />
            <view class="text-[16px] text-[#4B3F28]">我的身份</view>
          </view>
          <!-- <view class="h-[28px] bg-[#E1B35C] rounded-lg overflow-hidden flex">
            <view class="text-[14px] text-[#4B3F28] h-full px-3 bg-white grid place-items-center"> 代理商 </view>
            <view class="text-[14px] text-[#4B3F28] h-full px-3 grid place-items-center"> 服务商 </view>
          </view> -->
        </view>
        <view class="flex flex-wrap gap-2 items-center mt-1" v-if="resultt">
          <view v-if="resultt?.is_yy === 1" class="tag-item whitespace-nowrap">运营</view>
          <view v-if="resultt?.is_gd === 1" class="tag-item whitespace-nowrap">股东</view>
          <view v-if="resultt?.is_gw === 1" class="tag-item whitespace-nowrap">顾问</view>
          <view v-if="resultt?.is_cw === 1" class="tag-item whitespace-nowrap">财务</view>
          <view v-if="resultt?.is_bz === 1" class="tag-item whitespace-nowrap">部长</view>
          <!-- is_shop 店铺 -->
          <view v-if="resultt?.is_shop === 1" class="tag-item whitespace-nowrap">会长</view>
          <!-- is_brand  品牌 -->
          <view v-if="resultt?.is_brand === 1" class="tag-item whitespace-nowrap">品牌</view>
          <!-- is_store 门店 -->
          <view v-if="resultt?.is_store === 1" class="tag-item whitespace-nowrap">门店</view>
        </view>
        <u-line></u-line>
        <view class="grid grid-cols-4 place-items-center">
          <view class="flex flex-col col-span-1 gap-1 justify-center items-center">
            <view class="text-[22px] text-[#1A1A1A] font-bold">{{ state.data.total_num || 0 }}</view>
            <view class="text-[rgba(26,26,26,0.68)]">会员</view>
          </view>
          <view class="flex flex-col col-span-1 gap-1 justify-center items-center">
            <view class="text-[22px] text-[#1A1A1A] font-bold">{{ state.data.shop_num || 0 }}</view>
            <view class="text-[rgba(26,26,26,0.68)]">会长</view>
          </view>
          <view class="flex flex-col col-span-1 gap-1 justify-center items-center">
            <view class="text-[22px] text-[#1A1A1A] font-bold">{{ state.data.brand_num || 0 }}</view>
            <view class="text-[rgba(26,26,26,0.68)]">品牌</view>
          </view>
          <view class="flex flex-col col-span-1 gap-1 justify-center items-center">
            <view class="text-[22px] text-[#1A1A1A] font-bold">{{ state.data.store_num || 0 }}</view>
            <view class="text-[rgba(26,26,26,0.68)]">门店</view>
          </view>
        </view>
      </view>
      <view class="text-[18px] text-[#181818]"> 粉丝列表 </view>
      <view class="flex flex-col gap-2">
        <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无粉丝" icon="/static/collect-empty.png" />

        <view
          class="flex overflow-hidden relative gap-3 items-center p-4 bg-white rounded-lg"
          v-for="(i, k) in state.list"
          :key="k"
          v-if="state.list"
        >
          <image :src="i.avatar" class="size-8 flex-none bg-gray-50" mode="scaleToFill" />
          <view class="flex flex-col gap-1">
            <view class="flex gap-1 items-center">
              <view class="font-[weight:400] text-[15px] text-[#181818]">{{ i.nickname }}</view>
              <view class="font-[weight:400] text-[15px] text-[#181818]">{{ i.mobile }}</view>
            </view>
            <view class="text-[13px] text-[#9D9D9D]">{{ i.createtime }}</view>
          </view>
          <view class="absolute top-0 right-0 h-[26px] bg-[#EAB265] px-3 rounded-tr-lg rounded-bl-lg grid place-items-center" v-if="i.is_yxuser">
            <view class="text-[14px] text-[#FFFFFF]"> 会员 </view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more status="noMore" v-if="state.list.length"></uni-load-more>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    list: [],
    loading: true,
    data: {},
    page: 1,
  });
  let resultt = ref({});
  myInfo();
  function myInfo() {
    sheep.$api.yy
      .myInfo()
      .then((result) => {
        resultt.value = result.data;
      })
      .catch((err) => {});
  }
  fans();
  getFans();
  onReachBottom(() => {
    state.value.page++;
    getFans();
  });
  onPullDownRefresh(() => {
    state.value.page = 1;
    getFans();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);
  });

  function getFans() {
    sheep.$api.user
      .sharelog({
        type: 'income',
        // list_rows,
        page: state.value.page,
      })
      .then((res) => {
        if (res.code === 1) {
          state.value.list = [...state.value.list, ...res.data.data];
        }
      });
  }
  function fans() {
    state.value.loading = true;
    let obj = {};
    sheep.$api.yy
      .fans(obj)
      .then((res) => {
        state.value.data = res.data;
      })
      .finally(() => {
        state.value.loading = false;
      });
  }

  onLoad(() => {});
</script>

<style lang="scss" scoped></style>
